<template>
  <view>
    <!-- 轮播图 -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      :info="data"
      :current="current"
      field="content"
    >
      <swiper
        class="swiper-box"
        :current="swiperDotIndex"
        @change="changeSwiper"
      >
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view v-if="showCode == false">
      <view class="padding flex flex-direction">
        <button
          class="cu-btn bg-blue lg cuIcon-upload"
          plain
          @click="chooseFile"
        >
          添加文件
        </button>
      </view>
      <view v-if="files.length > 0">
        <view class="cu-list menu-avatar margin-top">
          <view
            class="cu-item"
            v-for="(item, index) in files"
            :key="index"
            :data-target="'move-box-' + index"
          >
            <view class="cu-avatar lg"></view>
            <view class="content" @click="download(item)">
              <view class="text-grey text-ellipsis">{{ item.fileName }}</view>
              <view class="text-gray text-sm">
                {{ (item.fileSize / 1024).toFixed(2) }}kb
              </view>
            </view>
            <view class="action" @click="deleteFile(index)">
              <view class="cuIcon-delete round"></view>
            </view>
          </view>
        </view>
        <view>
          <view class="cu-form-group margin-top">
            <view class="title">有效期</view>
            <picker :value="index" :range="picker" range-key="dictLabel" @change="PickerChange">
              <view class="picker">
                {{
                  index > -1
                    ? picker[index].dictLabel
                    : "请选择有效期限"
                }}
              </view>
            </picker>
          </view>
		  <view class="cu-form-group margin-top">
				<textarea maxlength="-1"  placeholder="输入你的信息，它将显示给收到的用户" v-model="remark"></textarea>
			</view>
        </view>
        <view class="padding flex flex-direction">
          <button class="cu-btn bg-blue lg" @click="save">选好了</button>
        </view>
      </view>
    </view>
    <view v-if="showCode == true">
      <view class="cu-form-group margin text-center">
        <view
          class=" text-bold text-center padding-tb-lg text-xxl" @click="cloneClick"
          style="margin: 0 auto;font-size: 44upx;"
          >{{ code }}</view
        >
      </view>
      <view style="text-align: center">对方输入6位数取件码，即可下载文件</view>
      <view class="padding flex flex-direction">
        <button
          class="cu-btn bg-blue lg"
          @click="
            showCode = false;
            files = [];
          "
        >
          继续发送
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import upload from "@/utils/upload";
import { genCode } from "@/api/system/share";
import store from "@/store";
import {getDicts} from "@/api/system/data";
export default {
  data() {
    return {
      index: -1,
      picker: [],
	  remark:'',
      files: [],
      showCode: false,
      code: "123456",
      current: 0,
      swiperDotIndex: 0,
      data: [
        {
          image: "/static/banner.jpg",
        },
        {
          image: "/static/banner.jpg",
        },
        {
          image: "/static/banner.jpg",
        },
      ],
    };
  },
  onLoad(){
	this.getExpList();
  },
  methods: {
	cloneClick(){
		uni.setClipboardData({
		  data: this.code,
		  success: (res) => {
			uni.showToast({
				title:'复制成功'
			})
		  },
		  fail: (res) => {},
		  complete: (res) => {},
		})
	},
	getExpList(){
		getDicts("file_exp").then(res=>{
			this.picker=res.data
			console.log(this.picker)
		})
	},
	PickerChange(e){
		this.index=e.detail.value
	},
    deleteFile(index) {
      this.files.splice(index, 1);
    },
    chooseFile() {
      let that = this;
      uni.showActionSheet({
        itemList: ["本地照片", "本地视频", "微信文件"],
        success: function (res) {
          switch (res.tapIndex) {
            case 0:
              that.chooseImage();
              break;
            case 1:
              that.chooseVideo();
              break;
            case 2:
              that.chooseMessageFile();
              break;
          }
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },
    chooseImage() {
      let that = this;
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          that.uploadTempFilePaths(res.tempFilePaths);
        },
      });
    },
    chooseVideo() {
      let that = this;
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: function (res) {
          console.log(res.tempFilePath);
          that.uploadTempFilePath(res.tempFilePath);
        },
      });
    },
    chooseMessageFile() {
      let that = this;
      wx.chooseMessageFile({
        count: 10,
        type: "image",
        success(res) {
          // tempFilePath可以作为img标签的src属性显示图片
          that.uploadTempFilePaths(res.tempFilePaths);
        },
      });
    },
    uploadTempFilePath(tempFilePath) {
      let that = this;
      uni.uploadFile({
        url: this.server + "/common/upload",
        filePath: tempFilePath,
        name: "file",
        success: (res) => {
          let file = JSON.parse(res.data);
          if (file.originalFilename.length > 15) {
            let array = file.originalFilename.split(".");
            file.originalFilename =
              file.originalFilename.substring(0, 15) +
              "..." +
              array[array.length - 1];
          }
          that.files.push(file);
        },
      });
    },
    uploadTempFilePaths(tempFilePaths) {
      let that = this;
      for (let item of tempFilePaths) {
        upload({
          filePath: item,
          name: "file",
          url: "/system/oss/upload",
          headers: {
            isToken: false,
          },
        }).then((res) => {
          that.files.push(res.data);
        });
      }
    },
    save() {
      let that = this;
      let files = "";
      if (this.files.length == 0) {
        uni.showToast({
          title: "请上传文件",
          icon: "error",
        });
        return;
      }
	  if(this.index<=-1){
		uni.showToast({
          title: "请选择有效期",
          icon: "error",
        });
        return;
	  }
	  let exp=this.picker[this.index].dictValue
      this.files.forEach((item) => {
        files += item.ossId + ",";
      });
      genCode({
        userId: store.getters.userid,
        paths: files,
		exp:exp,
		remark:that.remark
      }).then((res) => {
        that.showCode = true;
        that.code = res.data;
      });
    },
  },
};
</script>

<style>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
.text-ellipsis {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cu-avatar {
  background-image: url("/static/images/24gl-fileText.png");
  background-color: initial;
}
</style>